<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{$seo_title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://statics.webkfa.com/mui/mui.min.css">
    <script src="http://statics.webkfa.com/mui/mui.min.js"></script>
    <script src="http://statics.webkfa.com/mui/app.js"></script>
    <style>
        html,
        body {
            background-color: #efeff4;
            max-width: 1000px;
            margin: 0 auto;
        }
    </style>
    <script>
        mui.init();
    </script>
</head>

<body>

<link rel="stylesheet" href="../css/oa.css">
<style>
    li{
        list-style: none;
    }
    .mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
        margin-top: 0;
    }
    .mui-table h4{
        line-height: 21px;
        font-weight: 500;
    }

    .mui-table .oa-icon{
        position: absolute;
        right:0;
        bottom: 0;
    }
    .mui-table .oa-icon-star-filled{
        color:#f14e41;
    }



    /*banner开始*/
    .banner{
        padding-top: 5px;

    }
@media (min-width: 992px){
    .banner{
        width: 960px;
        height: auto;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    .banner .main>div{
        width: 300%;
        height: auto;

    }
    .main{
        width: 1000px;
        margin: 0 auto;
        background: #ffffff;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .banner .main .img{
        width: 960px;
        height: 380px;
        float: left;
        /*display: none;*/
    }
    .banner ul{
        width: 60px;
        height: 25px;
        position: absolute;
        bottom:0px;
        left: 50%;
        margin-left: -60px;
    }
    .banner ul li{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #000000;
        margin-right: 10px;
        float: left;
        cursor: pointer;
    }
    .banner ul .now{
        background: gray;
    }
}

@media (max-width: 992px){
    .banner{
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
    }
    .banner .main>div{
        width: 300%;
        height: auto;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .banner .main .img{
        width: 33.33%;
        height: 400px;
        float: left;
        /*display: none;*/
    }
    .banner ul{
        width: 60px;
        height: 25px;
        position: absolute;
        bottom:0px;
        left: 50%;
        margin-left: -60px;
    }
    .banner ul li{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #000000;
        margin-right: 10px;
        float: left;
        cursor: pointer;
    }
    .banner ul .now{
        background: gray;
    }
}
@media (max-width: 768px){
    .banner{
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;
    }
    .banner .main>div{
        width: 300%;
        height: auto;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .banner .main .img{
        width: 33.33%;
        height: 16.5rem;
        float: left;
        /*display: none;*/
    }
    .banner ul{
        width: 60px;
        height: 25px;
        position: absolute;
        bottom:0px;
        left: 50%;
        margin-left: -60px;
    }
    .banner ul li{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #000000;
        margin-right: 10px;
        float: left;
        cursor: pointer;
    }
    .banner ul .now{
        background: gray;
    }
}
/*banner结束*/

.mui-content ul{
    -webkit-padding-start: 0;
}
.mui-content ul h5{
    text-indent: 2em;
}
.mui-text-right{
    line-height: 40px;
}
h5{
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}
</style>
<div class="banner">
    <div class="main">
        <div class="banner-img">
            <div class="img" ><img src="__HOME__/img/banner10.jpg" alt=""></div>
            <div class="img"><img src="__HOME__/img/banner11.jpg" alt=""></div>
            <div class="img"><img src="__HOME__/img/banner12.jpg" alt=""></div>
        </div>
        <ul class="yuan">
            <li class="now"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{$seo_title}</h1>
</header>



<div class="mui-content">
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        {volist name="news_list" id="news"}

        <li class="mui-table-view-cell">
            <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-10">
                    <h4 class="mui-ellipsis"><a href="/index/news/show/id/{$news.nid}.html" >{$news.ntitle}</a></h4>
                    <!-- <h5>分类：{$news.fclass}</h5> -->
                    <!--<p class="mui-h6 mui-ellipsis"> </p>-->
                </div>
                <div class="mui-table-cell mui-col-xs-2 mui-text-right" style="border-bottom: 1px solid #ccc;">
                    <h5>{$news.fclass}</h5>
                    <!-- <span class="mui-h5">{$news.ntime}</span> -->
                </div>
                <div class="mui-table-cell mui-col-xs-2 mui-text-right" style="border-bottom: 1px solid #ccc;">
                    <h5>{$news.fclass}</h5>
                    <!-- <span class="mui-h5">{$news.ntime}</span> -->
                </div>
            </div>
        </li>
        {/volist}
        
    </ul>
</div>
<script src="__HOME__/js/lk/jquery-1.12.4.js"></script>
<script type="text/javascript">
//轮播图
$(function(){
        var n=0;
        $('.banner ul>li').click(function(){
            $(this).addClass('now').siblings().removeClass('now');
            $('.banner .img').eq($(this).index()).show().siblings('.banner .img').hide();
            n=$(this).index();
        });

    var i=0;
    var len =$(".banner-img .img").length;
    //alert(len)

    var timer;
    playtTimer();
    function playtTimer(){
        timer=setInterval(function(){
            i++;
            if(i>len-1){
                i=0;
            }
            $(".banner-img .img").fadeOut().eq(i).fadeIn();
            $(".yuan>li").removeClass("now").eq(i).addClass("now")

        },6000)
    }

});
</script>
</body>
</html>
